<template>
	<view>
		<view class="fixed-top" :style='{"padding-top": statusBarHeight+"px"}'>
			<view class="header-top">
				<image src="../static/images/backLast.png" class="back" @click="goback"></image>
				<view class="header-top-tittle">我的发布-招工</view>
				<image class="right-tip" src="../static/images/add.png"
					@click="toPage('/pages/releases/merchantService/merchantService?categoryOn=6')"
					style='width: 40rpx; height: 40rpx;margin-top: 15rpx;'></image>
			</view>
			<view class="acea-row row-middle row-between nav-bg">
				<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;" scroll-with-animation
					:scroll-left="tabLeft" show-scrollbar="true">
					<view class="item" :class="index===categoryOn?'item-on':''" v-for="(item,index) in categoryList"
						:key="index" @click="categoryNavClick(item,index)">
						<view class="acea-row row-middle row-center img">
							<image :src="'../static/images/' + item.image" mode=""></image>
						</view>
						<view class="name">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="content" :style='{"padding-top": (statusBarHeight+126)+"px"}'>
			<view class="acea-row row-middle type-bg">
				<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" :key="index"
					@click="typeNavClick(item,index)">
					{{item.name}}
				</view>
			</view>
			<view class='line'>
				<jobItem :item="item" v-for="(item,index) in dataList" @updateItem="((k,v)=>$set(dataList[index],k,v))" @reload="reload"></jobItem>
			</view>
<!-- 			<view class='loadingicon acea-row row-center row-middle' @click="toMore">
				<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
			</view> -->
		</view>
		<!-- <u-loading-icon :show="moreShow" text="加载中"></u-loading-icon> -->
		<!-- <u-loading-page :loading="loading"></u-loading-page> -->
		<view class='loadingicon acea-row row-center row-middle' @click="toMore">
			<text class='loading iconfont icon-jiazai' :hidden='loading'></text>{{loadTitle}}
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import jobItem from "../components/jobItem.vue"
	import emptyPage from '@/components/emptyPage.vue';
	import {
		getObjectListApi,
		getOnJobApi,
		getOnRecruitApi
	} from '@/api/recruit.js'
	import {
		toPage
	} from '@/filters/commFilter.js'
	export default {
		components: {
			emptyPage,
			jobItem
		},
		data() {
			return {
				statusBarHeight: 0,
				isWidth: 42,
				isLeft: 0,
				tabLeft: 0,
				types: [{
					name: '全职',
					value: 0
				}, {
					name: '兼职',
					value: 1
				}],
				typeOn: 0,
				categoryOn: 0,
				categoryList: [{
					name: '全部',
					image: 'all.png'
				}, {
					name: '求职',
					image: 'navS_06.png',
				}, {
					name: '招工',
					image: 'navS_07.png',
				}],
				page: 1,
				loading: true,
				loadend: false,
				loadTitle: '加载更多',
				moreShow: false,
				dataList: [],
				totalPage: 0
			}
		},
		onLoad(option) {
			// #ifdef MP || APP-PLUS
			let height = app.globalData.navHeight - 90;
			this.statusBarHeight = height + 4;
			// #endif
			// #ifdef H5
			this.statusBarHeight = 20;
			// #endif
			// this.categoryOn = option.categoryOn || 0
		},
		onReachBottom() {
			this.toMore()
		},
		onShow() {
			this.page = 1;
			this.dataList =[];
			this.initData()
		},

		methods: {
			toPage,
			toMore() {
				console.log('more')
				if (this.page >= this.totalPage) {
					this.loadTitle = "暂无更多"
					return;
				};

				this.page += 1;
				this.moreShow = true
				this.initData()
			},
			reload(){
				this.dataList = [];
				this.page = 1;
				this.initData()
			},
			async getList() {
				try {
					this.loading = false;
					let {
						data
					} = await getObjectListApi({
						limit: 10,
						fullStatus: this.types[this.typeOn].value,
						page: this.page,
					});
					this.loading = true;
					let list = [];
					// data.list.map((item,index) => {
					// 	item.list.map(child => {
					// 		list.push({ ...child, type: index })
					// 	})
					// })
					let r = data.list[0].list.map(item => ({
						...item,
						type: 0
					}))
					let j = data.list[1].list.map(item => ({
						...item,
						type: 1
					}))
					list = [...r, ...j]
					console.log('list', list)
					if (list.length < 1) {
						this.loadTitle = '暂无更多'
					} else {
						this.loadTitle = '加载更多'
					}

					return {
						list,
						totalPage: data.totalPage
					}
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//求职列表
			async getJobList() {
				try {
					this.loading = false;
					let {
						data
					} = await getOnJobApi({
						page: this.page,
						limit: 10,
						fullStatus: this.types[this.typeOn].value,
					});

					this.loading = true;

					data.list = data.list.map(item => {
						return {
							...item,
							type: 1
						}
					})

					if (data.list.length < 1) {
						this.loadTitle = '暂无更多'
					} else {
						this.loadTitle = '加载更多'
					}
					return data
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//招工列表
			async getRecruitList() {
				try {
					this.loading = false;
					this.loadTitle = "加载中"
					let {
						data
					} = await getOnRecruitApi({
						page: this.page,
						fullStatus: this.types[this.typeOn].value,
						limit: 10
					});
					this.loading = true;
					data.list = data.list.map(item => {
						return {
							...item,
							type: 0
						}
					})
					if (data.list.length < 1) {
						this.loadTitle = '暂无更多'
					} else {
						this.loadTitle = '加载更多'
					}
					return data
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			goback() {
				// #ifdef H5
				return history.back();
				// #endif
				// #ifndef H5
				return uni.navigateBack({
					delta: 1,
				})
				// #endif
			},
			typeNavClick(item, index) {
				// let title = '发布-'+this.categoryList[this.categoryOn].name+item.name
				// uni.setNavigationBarTitle({
				// 	title:title
				// })
				this.typeOn = index;
				this.initData()
			},
			async initData() {
				let data = {}
				switch (this.categoryOn) {
					case 0:
						data = await this.getList()
						break;
					case 1:
						data = await this.getJobList()
						break;
					case 2:
						data = await this.getRecruitList()
						break;
					default:
						break;
				};
				this.dataList = data.list;
				this.totalPage = data.totalPage;
				this.moreShow = false
			},
			// 导航栏点击
			categoryNavClick(item, index) {
				if (index == 5 || index == 6) {
					let title = '发布-商家服务-' + item.name
					uni.setNavigationBarTitle({
						title: title
					})
				} else {
					let title = '发布-商家服务'
					uni.setNavigationBarTitle({
						title: title
					})
				}

				if (this.categoryList.length > 6) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index //设置导航点击了哪一个
				this.isLeft = index * this.isWidth //设置下划线位置
				this.initData()
			},
		}
	}
</script>

<style lang="scss">
	.type-bg {
		padding: 24rpx 30rpx;
		background: rgba(247, 248, 250, 1);
		margin-top: 30rpx;
		.type~.type {
			margin-left: 18rpx;
		}

		.type {
			padding: 6rpx 24rpx;
			border-radius: 10rpx;
			border: 1px solid rgba(229, 229, 229, 1);
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(128, 128, 128, 1);
		}

		.type-on {
			border: 1px solid rgba(238, 33, 45, 1);
			background: rgba(238, 33, 45, 1);
			color: #ffffff;

		}
	}

	.header-top {
		position: relative;
		height: 88rpx;
		line-height: 88rpx;
		background: rgba(238, 33, 45, 1);
		padding: 0rpx 30rpx;
		text-align: center;

		.header-top-tittle {
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
		}

		.right-tip {
			position: absolute;
			right: 26rpx;
			top: 50%;
			transform: translateY(-20rpx);
			height: 40rpx !important;
			width: 40rpx !important;
			margin: unset !important;
		}
	}

	.nav-bg {
		background: #ffffff;
		padding: 18rpx 30rpx 36rpx;

		// overflow-x: scroll;
		// white-space: normal!important;
		.item~.item {
			margin-left: 36rpx;
		}

		.item {
			display: inline-block;
			white-space: nowrap;

			.img {
				margin: 0 auto;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background: #ffffff;

				image {
					width: 42rpx;
					height: 44rpx;
				}
			}

			.name {
				// width: 108rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
		}

		.item-on {
			.img {
				background: rgba(247, 247, 247, 1);
			}

			.name {
				color: rgba(239, 39, 50, 1);
			}
		}
	}

	.fixed-top {
		width: 100%;
		background: #EE212D;
		position: fixed;
		top: 0;
		left: 0;
		height: 240rpx;
		z-index: 999;

		.back {
			position: absolute;
			left: 26rpx;
			top: 50%;
			transform: translateY(-11rpx);
			height: 30rpx !important;
			width: 22rpx !important;
			margin: unset !important;
		}
	}
</style>